<template>
  <van-nav-bar
  title="注册账号"
  left-text="返回登录"
  left-arrow
  @click-left="onClickLeft"
/>
  <div class="login">
    <div>注册</div>
    <van-form @submit="onSubmit">
      
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="userphone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="userPwd"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div class="seleteImg">
        <div>上传头像</div>
        <div>
          <van-uploader :after-read="afterRead" />
        </div>
        <div v-if="imgs != ''">
          <img class="yulantu" :src="imgs" alt="" />
        </div>
      </div>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>
    <div>
      {{ msg }}
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { userslogon } from "@/api";
import { showToast } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const userphone = ref("");
const userPwd = ref("");
const msg = ref("");
let router = useRouter();
let store = useStore();
let imgs = ref("");
let username = ref("");


const afterRead = (file: any) => {
  // 此时可以自行将文件上传至服务器
  if (file.content.length < 50000) {
    imgs.value = file.content;
  } else {
    showToast({
      message: "图片太大了",
      position: "top",
    });
  }
};

const onSubmit = () => {
  let userTser = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  if (userTser.test(userphone.value) && userPwd.value.length> 5&&username.value.length > 2) {
    userslogon(username.value,userphone.value, userPwd.value,imgs.value).then((result) => {
      showToast({
      message: "注册成功",
      position: "top",
    });
      router.push({
        path:'/'
      })
    }).catch((err) => {
      showToast({
      message: "网络错误",
      position: "top",
    });
    });

    
  }else{
    console.log(userphone.value , userPwd.value.length,username.value.length);
    
    showToast({
      message: "格式不正确",
      position: "top",
    });
  }
};
const onClickLeft = () => {
  router.push({
    path:'/'
  })
};
</script>
  
  <style lang="less" scoped>
.login {
  padding-top: 40rem;
  > div:nth-child(1) {
    font-size: 16rem;
    font-weight: 700;
    padding-bottom: 20rem;
  }
}
.seleteImg {
  text-align: left;
  margin-left: 30rem;
  > div {
    margin-top: 10rem;
  }
}
.yulantu {
  width: 80rem;
  height: 80rem;
  background-color: #eeeeee;
}
</style>